<template>
  <div class="qr-x">
    <div class="img-x">
      <img
        v-show="!!qrcode"
        class="qr-img"
        :class="{ bigqr: isShowClose }"
        :src="qrcode"
        alt="connect qr"
      />
      <div class="re-gen" v-if="!code">
        <button class="re-fresh-btn" :disabled="type === 'sync'" @click="reGen">
          <a-icon v-if="type === 'redo'" width="16" height="16" type="redo" />
          <a-icon
            v-if="type === 'sync'"
            width="16"
            height="16"
            type="sync"
            spin
          />
        </button>
      </div>
    </div>
    <div class="tip">
      <p>{{ codeText }} : {{ code }}</p>
    </div>
    <div v-if="isShowClose" class="close-btn">
      <button class="anov-modal-btn my-close-btn" @click="close">
        {{ $t('cmlpanel.stop') }}
      </button>
    </div>
  </div>
</template>
<script>
import { Icon } from 'ant-design-vue'
import QRCode from 'qrcode'
import EventBus from '@/assets/js/app/cmlpanel/util/bus.js'
const projectId = require('../../../../../../../package.json').projectId
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'QrImage',
  components: {
    [Icon.name]: Icon
  },
  model: {},
  props: {
    failed: {
      type: Boolean,
      default: false
    },
    code: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      qrcode: '',
      type: 'redo'
    }
  },
  computed: {
    isShowClose() {
      return this.$parent.$options._componentTag === 'modal'
    },
    codeText() {
      return this.$t('cmlpanel.remoteCode')
    }
  },
  watch: {
    code: {
      handler: function (value) {
        if (value) {
          this.genQrCode(value)
        }
      },
      immediate: true
    },
    failed: {
      handler: function (value) {
        if (value) {
          this.type = 'redo'
        }
      }
    }
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    init() {},
    destroy() {},
    genQrCode(code) {
      const URL = 'https://anov.cucloud.cn/remote/#/'
      const STR = `${URL}?code=${code}&id=${projectId}`
      // With promises
      QRCode.toDataURL(STR, {
        errorCorrectionLevel: 'H',
        color: {
          dark: '#44cbd7ff',
          light: '#0f0f1200'
        }
      })
        .then((url) => {
          this.qrcode = url
        })
        .catch((err) => {
          console.log(err)
        })
    },
    reGen() {
      this.type = 'sync'
      this.$emit('regen')
    },
    close() {
      EventBus.$emit('closeModal', {
        noticeType: 'modal',
        componentsName: 'qr-image'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.qr-x {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img-x {
  position: relative;
}
.qr-img {
  width: 196px;
  height: 196px;
}
.bigqr {
  width: calc(196px * 1.4);
  height: calc(196px * 1.4);
}
.re-gen {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #00000080;
  display: flex;
  align-items: center;
  justify-content: center;
}
.re-fresh-btn {
  width: 50px;
  height: 50px;
  border: none;
  background-color: #c1fffb;
  padding: 10px;
  border-radius: 4px;
  &:hover {
    background-color: #44cbd7;
  }
}
.tip {
  padding: 6px 0 0;
}
.my-close-btn {
  background: transparent;
  opacity: 1;
}
</style>
